<template>
  <div id="global_map"></div>
</template>

<script>
import * as echarts from 'echarts'
import '@/assets/map/world.js'
export default {
  name: 'GlobalMap',
  mounted() {
    //中国地图
    var globalMapDom = document.getElementById('global_map')
    var globalMapChart = echarts.init(globalMapDom)
    var globalMapoption
    var dataList = []
    globalMapoption = {
      title: {
        text: '新型冠状病毒肺炎疫情地图',
        subtext: '累计确诊人数（截止至北京时间2020-06-09 08:30）',
        left: 'center',
        top: 'top'
      },
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          var value = params.value + ''
          return (
            params.seriesName + '<br/>' + params.name + ' : ' + value + '人'
          )
        }
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          dataView: {
            readOnly: false
          },
          restore: {},
          saveAsImage: {}
        }
      },
      visualMap: {
        min: 0,
        max: 2200000,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        color: ['orangered', 'yellow', 'lightskyblue']
      },
      series: [
        {
          name: '新型冠状病毒肺炎疫情地图',
          type: 'map',
          map: 'world',
          roam: true,
          emphasis: {
            label: {
              show: true
            }
          },
          data: dataList
        }
      ]
    }
    this.$http.get('/globalcovid').then((res) => {
      console.log(res)
      for (let i in res.data) {
        dataList[i] = res.data[i]
      }
      globalMapChart.setOption(globalMapoption)
    })
  }
}
</script>

<style lang="less" scoped>
#global_map {
  // margin-top: -70px;
  height: 700px;
}
</style>